<template>
	<view class="disclose-details">
		<navBar title="查看详情" @goBack="navBack"></navBar>

		<template v-if="fillRecordDetails">
			<view class="title">基本信息</view>
			<view class="card">
				<view class="inline-item">
					<view class="label">项目名称</view>
					<view class="label-content">{{fillRecordDetails.pmName}}</view>
				</view>

				<view class="inline-item">
					<view class="label">区间/站点</view>
					<view class="label-content no-overflow">
						{{ fillRecordDetails.planConstructionSiteSectionList.map(item => item.lineSiteSectionName).join("、") }}
					</view>
				</view>

				<view class="inline-item">
					<view class="label">监控室值班人</view>
					<view class="label-content">
						{{fillRecordDetails.watchmanUserName}}
					</view>
				</view>

				<view class="inline-item">
					<view class="label">现场带班负责人</view>
					<view class="label-content no-overflow">
						{{fillRecordDetails.personnelCallList.filter(it => it.relationType === 'xcdb').map(k => k.personName).join("、") }}
					</view>
				</view>

				<view class="inline-item" style="margin-top: 0;">
					<view class="label">劳务人员</view>
					<view class="label-content">
						{{fillRecordDetails.labour || ''}}人
					</view>
				</view>

				<view class="inline-item">
					<view class="label">特殊工种作业人员</view>
					<view class="label-content no-overflow">
						{{getPreName(fillRecordDetails.personnelCallList.filter(it => it.relationType === 'tsgz').map(item => item.personName).join("、")) || '无'}}
					</view>
				</view>

				<view class="inline-item">
					<view class="label">施工开始时间</view>
					<view class="label-content">{{getDate2(fillRecordDetails.constructionStartTime)}}</view>
				</view>

				<view class="inline-item">
					<view class="label">施工结束时间</view>
					<view class="label-content">{{getDate2(fillRecordDetails.constructionEndTime)}}</view>
				</view>

				<view class="inline-item">
					<view class="label">提交时间</view>
					<view class="label-content">{{getDate2(fillRecordDetails.recordCreateDate)}}</view>
				</view>


				<view class="inline-item">
					<view class="label">施工工法</view>
					<view class="label-content">
						{{fillRecordDetails.code == 'zhdx' && fillRecordDetails.planConstructionSiteSectionList.length ?  getName(fillRecordDetails.planConstructionSiteSectionList[0].constructionMethod) : ''}}
					</view>
				</view>
				<view v-if="fillRecordDetails.code === 'zhdx' && fillRecordDetails.planConstructionSiteSectionList.length &&  ['snwrd', 'swwrd'].includes(fillRecordDetails.planConstructionSiteSectionList[0].constructionMethod) ">
					<view class="inline-item">
						<view class="label">施工孔号及隧道环号</view>
					</view>
					<view class="uni-container" style="padding-bottom: 20rpx;">
						<uni-table ref="table"  stripe emptyText="暂无数据" width="200">
							<uni-tr>
								<uni-th align="center" width="120">施工孔号</uni-th>
								<uni-th align="center" width="120">隧道环号</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in fillRecordDetails.plannedConstructionWorkloads" :key="index">
								<uni-td align="center">{{ item.name }}</uni-td>
								<uni-td align="center">{{ item.tunnelRingNumber }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
				<view class="inline-item" style="margin-top: 0;">
					<view class="label">提交人</view>
					<view class="label-content">
						{{fillRecordDetails.creatorUserName || ''}}
					</view>
				</view>
			</view>
			<view v-if="state==='cancel'">
				<view class="title">取消信息</view>
				<view class="card">
					<view class="inline-item">
						<view class="label">取消原因</view>
						<view class="label-content">{{fillRecordDetails.cancelWhy || ''}}</view>
					</view>
					<view class="inline-item">
						<view class="label">取消时间</view>
						<view class="label-content">{{getDate2(fillRecordDetails.cancelDate)}}</view>
					</view>
					<view class="inline-item">
						<view class="label">取消人</view>
						<view class="label-content">{{fillRecordDetails.cancelUserName || ''}}</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import mixins from "@/utils/mixins.js"
	import fileMixin from "@/mixins/file.js";
	import {handleFormatDate} from "@/utils/date.js";
	import { constructionPlan_get, constructionPlan_delete } from "@/api/engineeringMaintenance/engineeringMaintenance.js";
	export default {
		mixins: [fileMixin,mixins],
		data() {
			return {
				// 填报记录详情
				fillRecordDetails: null,
				isLoading: false,
				isShowModal:false,
				state:''
			}
		},
		computed: {
			...mapGetters(['dictMap'])
		},
		onLoad(op) {
			if(op && op.id) {
				this.state = op.state
				this.getDetailInfo(op.id)
			}
		},
		methods: {
			getName(code) {
				const arr = this.$store.getters.dictMap['construction_method'] || []
				let name = ''
				if (arr && arr.length > 0) {
					name = arr.find(it => it.code === code) ? arr.find(it => it.code === code).name : ''
				}
				return name
			},
			navBack() {
				uni.navigateTo({
					url:`/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/index`
				})
			},
			clickdelete(item) {
				this.isShowModal = true
			},
			fnDelete(item) {
				constructionPlan_delete({id:item.id}).then(res => {
					uni.showToast({
						title:res.message,
						icon:'none',
						duration:1000
					})
					setTimeout(() => {
						uni.navigateBack()
					},1200)
					
				})
			},
			clickSubmit(item) {
				this.isLoading = true
				uni.navigateTo({
					url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/dailyConstructionPlan/index?isEdit=1&editObj=${JSON.stringify(item)}`
				})
				this.isLoading = false
			},
			getDetailInfo(id){
				constructionPlan_get({id, projectId:null}).then(res => {
					if(!res.success) return
					this.fillRecordDetails = res.result
				})
			},
			//匹配括号前的人名
			getPreName(str) {
				return str.replace(/\([^)]*\)/g, '');
			}
		}
	}
</script>

<style scoped lang="scss">
	.disclose-details {
		// min-height: 100vh;
		background: #f5f7fa;
		font-size: 32upx;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
		.no-overflow {
			text-overflow: initial !important;
			white-space: initial !important;
			overflow: initial !important;
			line-height: initial !important;
		}

		.title {
			font-size: 36upx;
			color: #22204e;
			font-weight: 800;
			padding: 38upx 30upx 12upx;
			line-height: 50upx;
		}

		.card {
			background: #fff;
			padding: 10upx 32upx 0 28upx;
			font-weight: bold;

			.inline-item {
				line-height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e2e5ed;
				margin-bottom: 10upx;

				&:last-of-type {
					border-bottom: none;
					margin-bottom: 0;
				}

				.label {
					color: #445469;
					flex-shrink: 0;
				}

				.label-content {
					max-width: 360upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding-right: 4upx;
				}
			}
		}
	}
</style>